<h1>Registrar Cliente</h1>

<br/>

<div class="form-horizontal">
    <div class="form-group">
        <label for="inputPrimerNombre" class="col-sm-2 control-label">Primer Nombre</label>
        <div class="col-sm-10">
            <div id="inputPrimerNombre-message"></div>
            <input type="text" class="form-control" id="inputPrimerNombre" placeholder="Primer Nombre">
        </div>
    </div>

    <div class="form-group">
        <label for="inputSegundoNombre" class="col-sm-2 control-label">Segundo Nombre</label>
        <div class="col-sm-10">
            <div id="inputSegundoNombre-message"></div>
            <input type="text" class="form-control" id="inputSegundoNombre" placeholder="Segundo Nombre">
        </div>
    </div>

    <div class="form-group">
        <label for="inputPrimerApellido" class="col-sm-2 control-label">Primer Apellido</label>
        <div class="col-sm-10">
            <div id="inputPrimerApellido-message"></div>
            <input type="text" class="form-control" id="inputPrimerApellido" placeholder="Primer Apellido">
        </div>
    </div>

    <div class="form-group">
        <label for="inputSegundoApellido" class="col-sm-2 control-label">Segundo Apellido</label>
        <div class="col-sm-10">
            <div id="inputSegundoApellido-message"></div>
            <input type="text" class="form-control" id="inputSegundoApellido" placeholder="Segundo Apellido">
        </div>
    </div>

    <div class="form-group">
        <label for="inputFechaNacimiento" class="col-sm-2 control-label">Fecha de Nacimiento</label>
        <div class="col-sm-10">
            <div id="inputFechaNacimiento-message"></div>
            <input type="date" class="form-control" id="inputFechaNacimiento" placeholder="Fecha de Nacimiento">
        </div>
    </div>

    <div class="form-group">
        <label for="inputSexo" class="col-sm-2 control-label">Sexo</label>
        <div class="col-sm-10">
            <div id="inputSexo-message"></div>
            <select class="form-control" id="inputSexo" placeholder="Sexo">
                <option></option>
                <option value="MASCULINO">Masculino</option>
                <option value="FEMENINO">Femenino</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="inputNacionalidad" class="col-sm-2 control-label">Nacionalidad</label>
        <div class="col-sm-10">
            <div id="inputNacionalidad-message"></div>
            <select class="form-control" id="inputNacionalidad" placeholder="Nacionalidad">
                <option></option>
                <?php
                foreach ($decPaisTable as $value) {
                    $decPais = new DecPais();
                    $decPais = (object) $value;

                    echo "<option value='{$decPais->getPaiId()}'>{$decPais->getPaiPais()}</option>";
                }
                ?>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="inputTipoDocumento" class="col-sm-2 control-label">Tipo de Documento</label>
        <div class="col-sm-10">
            <div id="inputTipoDocumento-message"></div>
            <select class="form-control" id="inputTipoDocumento" placeholder="Tipo de Documento">
                <option></option>
                <?php
                foreach ($decTipoDocumentoTable as $value) {
                    $decTipoDocumento = new DecTipoDocumento();
                    $decTipoDocumento = (object) $value;

                    echo "<option value='{$decTipoDocumento->getTidId()}'>{$decTipoDocumento->getTidDocumento()}</option>";
                }
                ?>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="inputNumeroDocumento" class="col-sm-2 control-label">Numero de Documento</label>
        <div class="col-sm-10">
            <div id="inputNumeroDocumento-message"></div>
            <input type="text" class="form-control" id="inputNumeroDocumento" placeholder="Numero de Documento">
        </div>
    </div>

    <div class="form-group">
        <label for="inputTelefono" class="col-sm-2 control-label">Telefono</label>
        <div class="col-sm-10">
            <div id="inputTelefono-message"></div>
            <input type="text" class="form-control" id="inputTelefono" placeholder="Telefono">
        </div>
    </div>

    <div class="form-group">
        <label for="inputDireccion" class="col-sm-2 control-label">Direccion</label>
        <div class="col-sm-10">
            <div id="inputDireccion-message"></div>
            <input type="text" class="form-control" id="inputDireccion" placeholder="Direccion">
        </div>
    </div>

    <div class="form-group">
        <label for="inputEmail" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <div id="inputEmail-message"></div>
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
    </div>

    <div class="form-group">
        <label for="inputUsuario" class="col-sm-2 control-label">Nombre de Usuario</label>
        <div class="col-sm-10">
            <div id="inputUsuario-message"></div>
            <input type="text" class="form-control" id="inputUsuario" placeholder="Nombre de Usuario">
        </div>
    </div>

    <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <div id="inputPassword-message"></div>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
    </div>

    <div class="form-group">
        <label for="inputPassword2" class="col-sm-2 control-label">Confime el Password</label>
        <div class="col-sm-10">
            <div id="inputPassword2-message"></div>
            <input type="password" class="form-control" id="inputPassword2" placeholder="Confirme el Password">
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary" id="buttonSave">Aceptar</button>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Exito!</h4>
            </div>
            <div class="modal-body">
                El usuario ha sido creado con exito
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        /* LISTENERS */
        $("#buttonSave").click(function () {
            if (isValid()) {
                save();
            }
        });
        $("#myModal").on("hidden.bs.modal", function (e) {
            $(location).attr("href", "<?php echo url_for("registrar_cliente/index"); ?>");
        });
    });

    function isValid() {
        var valid = true;
        
        var id = "inputPrimerNombre";
        if (isEmpty($("#" + id).val())) {
            valid = false;
            setError(id, "Campo requerido");
        } else {
            clearError(id);
        }

        var id = "inputPrimerApellido";
        if (isEmpty($("#" + id).val())) {
            valid = false;
            setError(id, "Campo requerido");
        } else {
            clearError(id);
        }

        var id = "inputFechaNacimiento";
        if (isEmpty($("#" + id).val())) {
            valid = false;
            setError(id, "Campo requerido");
        } else {
            if (18 > getAge($("#" + id).val())) {
                valid = false;
                setError(id, "Debe ser mayor de edad");
            } else {
                clearError(id);
            }
        }

        var id = "inputSexo";
        if (isEmpty($("#" + id).val())) {
            valid = false;
            setError(id, "Campo requerido");
        } else {
            clearError(id);
        }

        var id = "inputNacionalidad";
        if (isEmpty($("#" + id).val())) {
            valid = false;
            setError(id, "Campo requerido");
        } else {
            clearError(id);
        }

        var id = "inputTipoDocumento";
        if (isEmpty($("#" + id).val())) {
            valid = false;
            setError(id, "Campo requerido");
        } else {
            clearError(id);
        }

        var id = "inputNumeroDocumento";
        if (isEmpty($("#" + id).val())) {
            valid = false;
            setError(id, "Campo requerido");
        } else {
            clearError(id);
        }

        var id = "inputTelefono";
        if (isEmpty($("#" + id).val())) {
            valid = false;
            setError(id, "Campo requerido");
        } else {
            clearError(id);
        }

        var id = "inputDireccion";
        if (isEmpty($("#" + id).val())) {
            valid = false;
            setError(id, "Campo requerido");
        } else {
            clearError(id);
        }

        var id = "inputEmail";
        if (!isEmail($("#" + id).val())) {
            valid = false;
            setError(id, "El email no es valido");
        } else {
            clearError(id);
        }

        var id = "inputUsuario";
        if (isEmpty($("#" + id).val())) {
            valid = false;
            setError(id, "Campo requerido");
        } else {
            if (userExists()) {
                valid = false;
                setError(id, "El usuario ya existe");
            } else {
                clearError(id);
            }
        }

        var id = "inputPassword";
        if (isEmpty($("#" + id).val())) {
            valid = false;
            setError(id, "El email no es valido");
        } else {
            clearError(id);
        }

        var id = "inputPassword2";
        if ($("#inputPassword").val() !== $("#inputPassword2").val()) {
            valid = false;
            setError(id, "El password no concuerda");
        } else {
            clearError(id);
        }

        return valid;
    }

    function userExists() {
        var inputUsuario = $("#inputUsuario").val();
        var ret = 0;

        $.ajax({
            async: false,
            type: "post",
            url: "<?php echo url_for("registrar_cliente/userExists"); ?>",
            dataType: "text",
            data: {
                inputUsuario: inputUsuario
            },
            success: function (response) {
                ret = response;
            }
        });

        return ret == 1 ? true : false;
    }

    function save() {
        var inputPrimerNombre = $("#inputPrimerNombre").val();
        var inputSegundoNombre = $("#inputSegundoNombre").val();
        var inputPrimerApellido = $("#inputPrimerApellido").val();
        var inputSegundoApellido = $("#inputSegundoApellido").val();
        var inputFechaNacimiento = $("#inputFechaNacimiento").val();
        var inputSexo = $("#inputSexo option:selected").val();
        var inputNacionalidad = $("#inputNacionalidad option:selected").val();
        var inputTipoDocumento = $("#inputTipoDocumento option:selected").val();
        var inputNumeroDocumento = $("#inputNumeroDocumento").val();
        var inputTelefono = $("#inputTelefono").val();
        var inputDireccion = $("#inputDireccion").val();
        var inputEmail = $("#inputEmail").val();
        var inputUsuario = $("#inputUsuario").val();
        var inputPassword = $("#inputPassword").val();
        var inputPassword2 = $("#inputPassword2").val();
        $.ajax({
            type: "post",
            url: "<?php echo url_for("registrar_cliente/save"); ?>",
            data: {
                inputPrimerNombre: inputPrimerNombre,
                inputSegundoNombre: inputSegundoNombre,
                inputPrimerApellido: inputPrimerApellido,
                inputSegundoApellido: inputSegundoApellido,
                inputFechaNacimiento: inputFechaNacimiento,
                inputSexo: inputSexo,
                inputNacionalidad: inputNacionalidad,
                inputTipoDocumento: inputTipoDocumento,
                inputNumeroDocumento: inputNumeroDocumento,
                inputTelefono: inputTelefono,
                inputDireccion: inputDireccion,
                inputEmail: inputEmail,
                inputUsuario: inputUsuario,
                inputPassword: inputPassword,
                inputPassword2: inputPassword2
            },
            success: function (response) {
                $("#myModal").modal("show");
            }
        });
    }
</script>